<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>ChatRoom</title>
	<link href="public/css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
	<input type="text" id="name" placeholder="输入用户名">
	<button id="setname" >设置</button>
	<input type="text" id="text" placeholder="输入发送内容">
	<button id="btn">发送</button>
</div>
<div id="body">
	<div id="container"></div>
	<audio src="public/6480.mp3" id="audios"></audio>
	<div id="chatterlist">
		<p class="chatterlist-head">在线用户(0)</p>
	</div>
</div>
<script>
  var ws = null;
	var audio = document.getElementById('audios');
  document.getElementById('setname').onclick = function () {
    var name = document.getElementById('name').value;
    if (name === '') {
      name = "DefaultN";
    }

    ws = new WebSocket('ws://106.12.18.110:12345');

    ws.onopen = function () {
      ws.send(JSON.stringify({
        name: name,
        type: 'setname'
      }));
    }

    document.getElementById('btn').onclick = send;
    document.getElementById('text').onkeyup = function(e) {
      if (e.keyCode !== 13) return;
      send();
    }

    ws.onmessage = function (e) {
      var data = JSON.parse(e.data);
      audio.play();
      if(data.type === 'chatterList') {
        var list = JSON.parse(data.list);

        var oldList = document.getElementById('chatterlist');
        oldList.innerHTML = '';

        var p_list_head = document.createElement('p');
        p_list_head.setAttribute('class', 'chatterlist-head');
        p_list_head.innerHTML = "在线用户(" + list.length + ")";
        oldList.appendChild(p_list_head);

        for(var i = 0; i < list.length; i++) {
          var p_user = document.createElement('p');
          p_user.innerHTML = list[i].name;
          p_user.setAttribute('class', 'userlist-item');
          oldList.appendChild(p_user);
        }
      } else {
        console.log(data);
        var oldContent = document.getElementById('container');
        oldContent.insertBefore(createChatDiv(data), oldContent.children[0]);
      }
    }

    var p_name = document.getElementById('name');
    var p_setname = document.getElementById('setname');
    p_name.innerHTML = name;
    p_setname.setAttribute('disabled', true);
    p_name.setAttribute('disabled', true);
    p_setname.style.display = "none";
    p_name.style.border = "none";
  }

  function createChatDiv(data) {
    var div = document.createElement('div');
    var p_time = document.createElement('p');
    var p_content = document.createElement('p');

    switch (data.type) {
      case 'serverInformation':
        p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss");
        p_content.innerHTML = data.message;
        break;

      case 'chat':
        p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss");
        p_content.innerHTML = data.name + ': ' + data.message;
        break;

      default:
        break;
    }

    p_time.setAttribute('class', 'time');
    p_content.setAttribute('class', 'content');

    div.appendChild(p_time);
    div.appendChild(p_content);
    return div;
  }

  Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }

  function send() {
    if(document.getElementById('text').value === '') return;
    ws.send(JSON.stringify({
      message: document.getElementById('text').value,
      type: 'chat'
    }));
    document.getElementById('text').value = '';
  }

</script>
</body>

</html>